<template>
	<page-body>
		<view class="page">
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout login_flex_0">
				<view class="tipe">
					欢迎登录
				</view>
				<!-- <view class='flex flex-direction flex-wrap align-center justify-between login_fd0_0'>
					<image class='login_fd0_0_c0' mode="aspectFill" :src='STATIC_URL+"LOGO.png"'></image>
					<text class='login_fd0_0_c1'>河南经贸智慧教学平台</text>
				</view> -->
				<view class="content" :class="tabs==1?'xs':'js'">
					<view class="tab flex-sub flex-wrap  flex justify-around">
						<view class="item" @tap.stop="tabs=1">
							<view class="name" :class="tabs==1?'se':''"> 学生登录 </view>
							<view class="flex xian" v-if="tabs==1"></view>
						</view>
						<view class="item" @tap.stop="tabs=2">
							<view class="name" :class="tabs==2?'se':''"> 教师登录 </view>
							<view class="flex xian" v-if="tabs==2"></view>
						</view>
					</view>
					<view class='flex flex-wrap align-center login_fd0_1'>
						<image class='login_fd0_1_c0' mode="aspectFit" :src='STATIC_URL+"1660.png"'></image>
						<benben-input class='flex-sub login_fd0_1_c1' type="text"
							:placeholder="tabs==1?placeholder1:placeholder2" confirm-type="done" :maxlength="11"
							placeholder-style="color:#999;font-size:28rpx" v-model="account" />
					</view>
					<view class='flex flex-wrap align-center login_fd0_2'>
						<image class='login_fd0_1_c0' mode="aspectFit" :src='STATIC_URL+"1575.png"'></image>
						<benben-flex-password-diy v-model="password" class-name="flex flex align-center login_fd0_2_c1"
							:placeholder="$t('请输入密码(6~12位字母+数字)')" :maxlength="12" :default-type='true'
							placeholder-style="color:#999;font-size:28rpx">
							<template #show>
								<text class='fu-iconfont2  login_fd0_2_c1_icon1' data-type="show">&#xE837;</text>
							</template>
							<template #hide>
								<text class='fu-iconfont2  login_fd0_2_c1_icon1' data-type="hide">&#xEBCC;</text>
							</template>
						</benben-flex-password-diy>
					</view>
					<!-- <view class='flex flex-direction-row-reverse flex-wrap align-center login_fd0_3'>
					  <text class='login_fd0_3_c0' @tap.stop="handleJumpDiy" data-type="navigateTo"
					    :data-url="`/pages/dlzc/verificationLogin/verificationLogin`">{{$t('验证码登录')}}</text>
					</view> -->
					<button class='login_fd0_4' @tap.stop="getrwc78dbfd977cfFunc()">{{$t('登录')}}</button>
					<view class='flex flex-wrap align-center justify-center login_fd0_5'>
						<text class='login_fd0_5_c0' @tap.stop="handleJumpDiy" data-type="navigateTo"
							:data-url="`/pages/dlzc/forgetPasswords/forgetPasswords?tab=${tabs}`">{{$t('忘记密码')}}</text>
					</view>
				</view>

				<jyf-parser class='doTheQuestion_fd1_1_c4_c0_c1_c0' :html="contentText">
				</jyf-parser>
				<view class='flex flex-direction align-stretch login_fd0_6'>
					<!--     <view   class='flex align-center justify-center login_fd0_6_c0'      >
							<image class='login_fd0_6_c0_c0'  mode="aspectFit"  :src='STATIC_URL+"1532.png"'></image>
							<image class='login_fd0_6_c0_c0'  mode="aspectFit"  :src='STATIC_URL+"1533.png"'></image>
							<image class='login_fd0_6_c0_c0'  mode="aspectFit"  :src='STATIC_URL+"5.png"'></image>
							<image class='login_fd0_6_c0_c0'  mode="aspectFit"  :src='STATIC_URL+"1534.png"'></image>
							<image class='login_fd0_6_c0_c4'  mode="aspectFit"  :src='STATIC_URL+"1535.png"'></image>
							</view>
							 -->
					<view class='flex align-stretch justify-center login_fd0_6_c1'>
						<benben-flex-switch-new class-name='flex flex' v-model="id_tk" :disabled='false'>
							<template v-slot:checked>

								<view class='flex align-stretch flex'>
									<image class='login_checkfd0_6_c1_c0_c0_c0' mode="aspectFit"
										:src='STATIC_URL+"1573.png"'></image>
								</view>

							</template>
							<template v-slot:unchecked>

								<view class='flex align-stretch justify-end flex'>
									<image class='login_checkfd0_6_c1_c0_c0_c0' mode="aspectFit"
										:src='STATIC_URL+"277.png"'></image>
								</view>

							</template>
						</benben-flex-switch-new>
						<view class='login_fd0_6_c1_c1'>
							<text class='login_fd0_6_c1_c1_c0'>{{$t('已阅读并同意')}}</text>
							<text class='login_fd0_6_c1_c1_c1' @tap.stop="handleJumpDiy" data-type="navigateTo"
								:data-url="`/pages/dlzc/privacyPolicy/privacyPolicy`">《用户注册协议》</text>与
							<text class='login_fd0_6_c1_c1_c1' @tap.stop="handleJumpDiy" data-type="navigateTo"
								:data-url="`/pages/dlzc/privacyPolicy/privacyPolicy`">{{$t('《隐私政策》')}}</text>
						</view>
					</view>
				</view>
			</view>

			<!---flex布局flex布局结束-->


		</view>
	</page-body>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.19.0/js/md5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	import CryptoJS from 'crypto-js';
	import {
		host
	} from '@/common/config.js';

	function md5Encrypt(message) {
		return CryptoJS.MD5(message).toString();
	}

	export default {
		components: {},


		data() {
			return {
				"account": "202225421 ZB0001 Z888888",//
				"password": "123456a",
				// "account": "",//
				// "password": "",
				"data": {
					"userinfo": {
						"user_token": "",
						"id": "",
						"avatar": "",
						"real_name": "",
						"nickname": "",
						"email": "",
						"gender": "",
						"mobile": "",
						"birthday": "",
						"client_id": "",
						"phone": ""
					}
				},
				"id_tk": true,
				"userInfo": {
					"invite_code": "",
					"address": "",
					"address_code": "",
					"hobby": "",
					"tags": "",
					"id": "",
					"userlevel_id": "",
					"mobile": "",
					"real_name": "",
					"avatar": "",
					"account": "",
					"email": "",
					"birthday": "",
					"gender": "",
					"create_time": "",
					"user_money": "",
					"freeze_money": "",
					"total_consumption_money": "",
					"score": "",
					"_mobile": "",
					"coupon": "",
					"total_money": "",
					"certified": "",
					"nickname": "",
					"is_pay_password": "",
					"is_close": ""
				},
				contentText: '',
				tabs: 1, //
				placeholder1: '请输入学号',
				placeholder2: '请输入教职工号',
				isup:false,
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			this.post67317846e39daApi()
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			async post67317846e39daApi() {
				return
				let res = await this.$api.post(global.apiUrls.post67317846e39da, {
					aid: 3,

				});
				this.contentText = res.data.data.content
			},
			//登录注册-账号密码登录
			async getrwc78dbfd977cfFunc() {
				if(this.isup){
					return
				}
				if (!validate(this.account, 'require')) {
					this.$message.info(global.i18n.t('账号不能为空'));
					return false;
				}
				if (!validate(this.password, 'require')) {
					this.$message.info(global.i18n.t('密码不能为空'));
					return false;
				}
				if (this.id_tk === false) {
					this.$message.info(global.i18n.t('请勾选隐私协议'));
					return false;
				}
				//请求方法
				//数据验证
				uni.showloding
				uni.setStorageSync('USER_GROUP',this.tabs)
				uni.showLoading({
				    title: '登录中'
				});
				this.isup=true
				// let encryptedMessage =this.tabs==1?this.password: md5Encrypt(this.password); 
				let datadata = await this.$api.post(global.apiUrls.post5c78dbfd977cf, {
					account: this.account,
					account_type: 'account',
					password: this.password
				});
				uni.hideLoading()
				if (datadata.data.code != 1) {
					this.isup=false
					this.$message.info(datadata.data.msg);
					return
				}
				let infodata = datadata.data;
				this.data = infodata.data
				// if (this.tabs == 1) {
				// 	let datadata = await this.$api.post(global.apiUrls.post5c78dbfd977cf, {
				// 		account: this.account,
				// 		account_type: 'account',
				// 		password: this.password
				// 	});

				// 	if (datadata.data.code != 1) {
				// 		this.$message.info(datadata.data.msg);
				// 		return
				// 	}
				// 	let infodata = datadata.data;
				// 	this.data = infodata.data
				// } else {
				// 	let encryptedMessage = md5Encrypt(this.password); // 要加密的信息
				// 	let url = host + '/api/v1/5c78dbfd977cf'
				// 	let datadata = await this.$api.post(url, {
				// 		mobile: this.account,
				// 		// member_id: '4037',
				// 		account_type: 'account',
				// 		password: encryptedMessage
				// 	});
				// 	if (datadata.data.code != 1) {
				// 		this.$message.info(datadata.data.msg);
				// 		return
				// 	}
				// 	let infodata = datadata.data;
				// 	this.data = infodata.data
				// }
				
				uni.setStorageSync('USER_GROUP', this.tabs);
				console.log(this.data)
				this.$store.commit('saveToken', this.data.userinfo.user_token)
				this.$store.commit('updateUserInfo', this.data.userinfo)
				this.$message.info('登录成功')
				setTimeout(() => {
					this.$urouter.switchTab(`/pages/tabBar/index/index`);
				}, 800)
				
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: url(image-path('1656.png')) no-repeat;
		background-size: 100% auto;
	}

	.tab {
		// margin-top: 50rpx;
		width: 100%;
		padding: 0 10%;

		.item {
			padding-top: 20rpx;

			.name {
				line-height: 64rpx;
				color: #ffffff;
				font-size: 32rpx;
				font-weight: 500;
			}

			.se {
				color: #145EFD;
			}

			.xian {
				width: 44rpx;
				height: 8rpx;
				background: #145EFD;
				border-radius: 4px;
				margin-left: 44rpx;

				// transform: scaleY(0.5);
			}
		}
	}

	.login_flex_0 {
		// padding: 0rpx 56rpx 0rpx 56rpx;
	}

	.login_fd0_6_c1_c1_c1 {
		color: var(--benbenFontColor4);
		font-size: 28rpx;
		font-weight: 400;
		line-height: 33rpx;
	}

	.login_fd0_6_c1_c1_c0 {
		color: var(--benbenFontColor2);
		font-size: 28rpx;
		font-weight: 400;
		line-height: 33rpx;
		margin: 0rpx 0rpx 0rpx 10rpx;
	}

	.login_fd0_6_c1_c1 {
		text-align: center;
	}

	.login_checkfd0_6_c1_c0_c0_c0 {
		width: 32rpx;
		height: 32rpx;
	}

	.login_fd0_6_c1 {
		margin: auto 0rpx 40rpx 0rpx;
	}

	.login_fd0_6_c0_c4 {
		width: 64rpx;
		height: 64rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.login_fd0_6_c0_c0 {
		width: 64rpx;
		height: 64rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 56rpx 0rpx 0rpx;
	}

	.login_fd0_6_c0 {
		margin: 0rpx 0rpx 40rpx 0rpx;
	}

	.login_fd0_6 {
		margin-top: 100rpx;
		// position: fixed;
		// bottom: calc(64rpx + var(--window-bottom));
		// left: 0rpx;
		width: 750rpx;
		padding: 24rpx 0rpx 0rpx 0rpx;
	}

	.login_fd0_5_c0 {
		color: #145EFD;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
	}

	.login_fd0_5 {
		margin: 48rpx 0rpx 0rpx 0rpx;
	}

	.login_fd0_4 {
		background: #134DDF;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-size: 32rpx;
		color: var(--benbenFontColor3);
		width: 638rpx;
		height: 88rpx;
		line-height: 88rpx;
		margin: 100rpx 32rpx 0rpx 32rpx;
	}

	.doTheQuestion_fd1_1_c4_c0_c1_c0 {
		margin: 50rpx 10rpx 0rpx 10rpx;
		font-size: 25rpx;
		line-height: 37rpx;
		color: #999999;
	}

	.login_fd0_3_c0 {
		color: var(--benbenFontColor0);
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
	}

	.login_fd0_3 {
		margin: 32rpx 0rpx 0rpx 0rpx;
	}

	.login_fd0_2_c1_icon1 {
		width: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 40rpx;
	}

	::v-deep .login_fd0_2_c1 {
		height: 88rpx;
		width: 502rpx;
		font-size: 28rpx;
		margin: 0rpx 0rpx 0rpx 32rpx;
		line-height: 40rpx;
		font-weight: 400;
		color: var(--benbenFontColor0);
	}

	.login_fd0_2 {
		// background: #E8EEFF;
		// border-radius: 44rpx 44rpx 44rpx 44rpx;
		// box-shadow: 0rpx 3rpx 6rpx 1rpx #FFF2F4;
		// padding: 0rpx 32rpx 0rpx 32rpx;
		border-bottom: 1rpx solid #f5f5f5;
		height: 125rpx;
		margin: 0 32rpx;
	}

	.login_fd0_1_c1 {
		// background: #E8EEFF;
		color: var(--benbenFontColor0);
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
		margin: 0rpx 0rpx 0rpx 32rpx;
		height: 88rpx;
		background-size: 100% auto;
	}

	.login_fd0_1_c0 {
		width: 34rpx;
		height: 34rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.login_fd0_1 {
		// background: #E8EEFF;
		// border-radius: 44rpx 44rpx 44rpx 44rpx;
		// box-shadow: 0rpx 3rpx 6rpx 1rpx #FFF2F4;
		// padding: 0rpx 32rpx 0rpx 32rpx;
		margin: 60rpx 32rpx 0 32rpx;

		width: 622rpx;
		height: 125rpx;
		border-bottom: 1rpx solid #f5f5f5;

	}

	.login_fd0_0_c1 {
		color: rgba(57, 65, 98, 1);
		font-weight: 600;
		font-size: 32rpx;
		line-height: 45rpx;
	}

	.login_fd0_0_c0 {
		width: 148rpx;
		height: 148rpx;
		border-radius: 40rpx;
	}

	.login_fd0_0 {
		margin: 180rpx 0rpx 0rpx 0rpx;
		height: 230rpx;
	}

	.tipe {
		margin: 140rpx 32rpx 132rpx 32rpx;
		height: 84rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 60rpx;
		color: #FFFFFF;
		line-height: 84rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.content {
		width: 686rpx;
		height: 769rpx;
		margin-left: 32rpx;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 32rpx;
		border: 2rpx solid #ffffff;
		// background: url(image-path('1659.png')) no-repeat;
		background-size: 100% 100%;
		justify-content: center;
		// display: flex;
		// flex-wrap: wrap;
	}

	.xs {
		background: url(image-path('1657.png')) no-repeat;
		background-size: 100% 100%;
	}

	.js {

		background: url(image-path('1658.png')) no-repeat;
		background-size: 100% 100%;
	}
</style>